import React, { useState } from 'react';
import { Map as MapIcon, Search, List } from 'lucide-react';
import MapComponent from '@/components/map/MapComponent.tsx';

const MapPage: React.FC = () => {
  const [searchQuery, setSearchQuery] = useState<string>("");
  const [activeTab, setActiveTab] = useState<string>("explore");
  const [selectedPlace, setSelectedPlace] = useState<any>(null);
  
  // 模拟地点数据
  const placesData = [
    { id: '1', name: '东京塔', address: '日本东京都港区芝公园4丁目2-8', type: '景点', rating: 4.5, distance: '1.2公里', description: '东京的标志性建筑，可以俯瞰整个城市', image: 'https://images.unsplash.com/photo-1546436836-07a91091f160?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=60', coordinates: { lat: 35.6586, lng: 139.7454 } },
    { id: '2', name: '浅草寺', address: '日本东京都台东区浅草2丁目3-1', type: '寺庙', rating: 4.6, distance: '2.5公里', description: '东京最古老的寺庙，充满传统文化氛围', image: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=60', coordinates: { lat: 35.7148, lng: 139.7967 } },
    { id: '3', name: '新宿御苑', address: '日本东京都新宿区内藤町11', type: '公园', rating: 4.7, distance: '3.5公里', description: '东京市中心的大型公园，四季风景各异', image: 'https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=60', coordinates: { lat: 35.6851, lng: 139.7104 } },
    { id: '4', name: '银座', address: '日本东京都中央区银座', type: '购物', rating: 4.4, distance: '2.8公里', description: '东京最繁华的商业街，高端购物和美食的天堂', image: 'https://images.unsplash.com/photo-1545569341-9eb8b30979d9?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=60', coordinates: { lat: 35.6719, lng: 139.7671 } }
  ];

  // 模拟路线数据
  const routeOptions = [
    { id: '1', name: '步行', duration: '45分钟', distance: '3.2公里' },
    { id: '2', name: '公共交通', duration: '15分钟', distance: '3.2公里' },
    { id: '3', name: '出租车', duration: '10分钟', distance: '3.2公里' },
    { id: '4', name: '共享单车', duration: '25分钟', distance: '3.2公里' }
  ];
  
  // 处理搜索
  const handleSearch = () => {
    console.log("搜索:", searchQuery);
    // 实际应用中这里会调用地图API进行搜索
  };
  
  // 处理地点选择
  const handleSelectPlace = (place: any) => {
    setSelectedPlace(place);
    setActiveTab('details');
  };
  
  // 处理路线规划
  const handlePlanRoute = () => {
    setActiveTab('route');
  };
  
  // 处理返回
  const handleBack = () => {
    if (activeTab === 'details' || activeTab === 'route') {
      setActiveTab('explore');
    } else {
      setSelectedPlace(null);
    }
  };

  return (
    <div className="h-full flex flex-col page-container map-page">
      {/* 地图搜索栏 - 响应式设计 */}
      <div className="p-3 sm:p-4 bg-white border-b map-content">
        <div className="flex items-center gap-2 sm:gap-3 overflow-x-auto">
          <div className="relative flex-1 min-w-0">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 sm:h-5 sm:w-5 text-gray-400" />
            <input
              type="text"
              placeholder="搜索地点、地址或坐标"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full pl-9 sm:pl-10 pr-3 sm:pr-4 py-2 sm:py-2.5 border rounded-lg text-sm sm:text-base focus:ring-2 focus:ring-blue-500 focus:border-transparent form-input"
            />
          </div>
          <button 
            className="px-3 sm:px-4 py-2 sm:py-2.5 bg-blue-500 text-white rounded-lg text-sm sm:text-base font-medium hover:bg-blue-600 transition-colors whitespace-nowrap btn"
            onClick={handleSearch}
          >
            搜索
          </button>
        </div>
      </div>
      
      {/* 主要内容区域 - 桌面端全宽布局 */}
      <div className="flex-1 flex flex-col lg:flex-row overflow-hidden">
        {/* 侧边栏 - 桌面端适配更宽屏幕 */}
        <div className="bg-white overflow-y-auto order-2 lg:order-1 h-64 lg:h-auto lg:w-80 xl:w-96 2xl:w-[28rem] flex-shrink-0 border-t lg:border-t-0 lg:border-r border-gray-200">
          {/* 标签页导航 */}
          <div className="flex border-b map-tabs" style={{ display: "flex", width: "100%" }}>
            <button 
              className={`flex-1 py-3 text-center ${activeTab === 'explore' ? 'border-b-2 border-blue-500 text-blue-500' : 'text-gray-500'}`}
              onClick={() => setActiveTab('explore')}
            >
              探索
            </button>
            <button 
              className={`flex-1 py-3 text-center ${activeTab === 'saved' ? 'border-b-2 border-blue-500 text-blue-500' : 'text-gray-500'}`}
              onClick={() => setActiveTab('saved')}
            >
              收藏
            </button>
            <button 
              className={`flex-1 py-3 text-center ${activeTab === 'history' ? 'border-b-2 border-blue-500 text-blue-500' : 'text-gray-500'}`}
              onClick={() => setActiveTab('history')}
            >
              历史
            </button>
          </div>
          
          {/* 探索标签页内容 */}
          {activeTab === 'explore' && (
            <div className="p-4">
              <h2 className="text-lg font-medium mb-4">附近地点</h2>
              
              <div className="space-y-4">
                {placesData.map((place) => (
                  <div 
                    key={place.id}
                    className="border rounded-lg p-3 hover:bg-gray-50 cursor-pointer place-item"
                    onClick={() => handleSelectPlace(place)}
                    style={{ display: "block", width: "100%" }}
                  >
                    <div className="flex justify-between place-header" style={{ display: "flex", justifyContent: "space-between", width: "100%" }}>
                      <h3 className="font-medium">{place.name}</h3>
                      <span className="text-sm text-gray-500">{place.distance}</span>
                    </div>
                    <p className="text-sm text-gray-500 mt-1">{place.address}</p>
                    <div className="flex justify-between items-center mt-2 place-footer" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%" }}>
                      <span className="text-sm bg-blue-100 text-blue-800 px-2 py-0.5 rounded place-type" style={{ display: "inline-block" }}>
                        {place.type}
                      </span>
                      <div className="flex items-center place-rating" style={{ display: "flex", alignItems: "center" }}>
                        <span className="text-yellow-500">★</span>
                        <span className="text-sm ml-1">{place.rating}</span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
          
          {/* 收藏标签页内容 */}
          {activeTab === 'saved' && (
            <div className="p-4">
              <h2 className="text-lg font-medium mb-4">收藏的地点</h2>
              <div className="text-center py-8 text-gray-500">
                <List className="h-12 w-12 mx-auto text-gray-300 mb-2" />
                <p>您还没有收藏任何地点</p>
                <p className="text-sm mt-1">探索并收藏您感兴趣的地点</p>
              </div>
            </div>
          )}
          
          {/* 历史标签页内容 */}
          {activeTab === 'history' && (
            <div className="p-4">
              <h2 className="text-lg font-medium mb-4">浏览历史</h2>
              <div className="text-center py-8 text-gray-500">
                <List className="h-12 w-12 mx-auto text-gray-300 mb-2" />
                <p>暂无浏览历史</p>
                <p className="text-sm mt-1">您浏览过的地点将显示在这里</p>
              </div>
            </div>
          )}
          
          {/* 地点详情标签页内容 */}
          {activeTab === 'details' && selectedPlace && (
            <div className="p-4">
              <button 
                className="flex items-center text-blue-500 mb-4"
                onClick={handleBack}
              >
                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
                  <path fillRule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clipRule="evenodd" />
                </svg>
                返回
              </button>
              
              <div className="h-40 bg-gray-200 rounded-lg mb-4">
                <img 
                  src={`https://source.unsplash.com/random/400x200/?${selectedPlace.type}`} 
                  alt={selectedPlace.name}
                  className="w-full h-full object-cover rounded-lg"
                />
              </div>
              
              <h2 className="text-xl font-medium">{selectedPlace.name}</h2>
              <div className="flex items-center mt-1">
                <span className="text-yellow-500">★</span>
                <span className="text-sm ml-1">{selectedPlace.rating}</span>
                <span className="text-sm text-gray-500 ml-2">(124条评价)</span>
              </div>
              
              <div className="mt-4">
                <h3 className="font-medium">地址</h3>
                <p className="text-gray-600 mt-1">{selectedPlace.address}</p>
              </div>
              
              <div className="mt-4">
                <h3 className="font-medium">坐标</h3>
                <p className="text-gray-600 mt-1">
                  {selectedPlace.coordinates.lat}, {selectedPlace.coordinates.lng}
                </p>
              </div>
              
              <div className="mt-4">
                <h3 className="font-medium">开放时间</h3>
                <p className="text-gray-600 mt-1">周一至周日 9:00 - 18:00</p>
              </div>
              
              <div className="mt-4">
                <h3 className="font-medium">联系电话</h3>
                <p className="text-gray-600 mt-1">+81 3-1234-5678</p>
              </div>
              
              <div className="mt-6 flex space-x-2 action-buttons" style={{ display: "flex", gap: "8px", width: "100%" }}>
                <button 
                  className="flex-1 py-2 bg-blue-500 text-white rounded-lg route-button"
                  onClick={handlePlanRoute}
                  style={{ flex: "1", display: "block", textAlign: "center" }}
                >
                  路线规划
                </button>
                <button className="flex-1 py-2 border border-gray-300 rounded-lg save-button" style={{ flex: "1", display: "block", textAlign: "center" }}>
                  收藏
                </button>
              </div>
            </div>
          )}
          
          {/* 路线规划标签页内容 */}
          {activeTab === 'route' && selectedPlace && (
            <div className="p-4">
              <button 
                className="flex items-center text-blue-500 mb-4"
                onClick={handleBack}
              >
                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
                  <path fillRule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clipRule="evenodd" />
                </svg>
                返回
              </button>
              
              <h2 className="text-xl font-medium">路线规划</h2>
              <p className="text-gray-600 mt-1">到 {selectedPlace.name}</p>
              
              <div className="mt-4">
                <div className="flex items-center p-3 border rounded-lg mb-2">
                  <div className="h-2 w-2 rounded-full bg-blue-500 mr-2"></div>
                  <input 
                    type="text" 
                    placeholder="当前位置" 
                    className="flex-1 outline-none"
                    defaultValue="当前位置"
                  />
                </div>
                
                <div className="flex items-center p-3 border rounded-lg">
                  <div className="h-2 w-2 rounded-full bg-red-500 mr-2"></div>
                  <input 
                    type="text" 
                    placeholder="目的地" 
                    className="flex-1 outline-none"
                    defaultValue={selectedPlace.name}
                  />
                </div>
              </div>
              
              <div className="mt-6">
                <h3 className="font-medium mb-2">交通方式</h3>
                <div className="grid grid-cols-2 gap-2 route-options" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }}>
                  {routeOptions.map((option) => (
                    <div 
                      key={option.id}
                      className="border rounded-lg p-3 cursor-pointer hover:bg-gray-50"
                    >
                      <div className="font-medium">{option.name}</div>
                      <div className="flex justify-between text-sm text-gray-500 mt-1">
                        <span>{option.duration}</span>
                        <span>{option.distance}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
              
              <button className="w-full py-2 bg-blue-500 text-white rounded-lg mt-6">
                开始导航
              </button>
            </div>
          )}
        </div>
        
        {/* 地图区域 - 响应式设计 */}
        <div className="flex-1 bg-gray-100 relative order-1 lg:order-2 min-h-96 lg:min-h-0">
          {/* 模拟地图背景 - 移动端友好 */}
          <MapComponent
            center={{ lat: 35.6586, lng: 139.7454 }} // 默认东京
            zoom={13}
            markers={placesData.map(place => ({
              id: place.id,
              lat: place.coordinates.lat,
              lng: place.coordinates.lng,
              title: place.name,
              onClick: () => handleSelectPlace(place)
            }))}
          />
        </div>
      </div>
    </div>
  );
};

export default MapPage;